/*  
 *  webpack 2开发环境配置
 **
 *  开发环境与生产环境相比较:
 *      1. 开发环境不需要html模版,而是在./index.html为基础上调试,在此文件写死打包后的脚本,所以也不需要[hash]
 *      2. --config ./webpack.config.dev.js指定需要运行的配置文件
        3. 其他请看readme.md
 */
const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');

const OPTS = {
    rootPath: path.resolve(__dirname),
    entry: {
        app: './src/main.js', //不可省略"./"
        vendor: ['jquery']
    },
    bundle: {
        toFolder: './dist/', //所有打包的文件存放路径
        filename: '[name].js', //开发环境下不要设置[hash],因为所有资源路径是写死的
        publicPath: '/dist/', //绝对路径,务必以'/'开头
        imageFilename: 'img/[hash:8].[ext]'
    },
    server: {
        // host: '192.168.31.25', //如需手机调试.可设置本地ip
        port: 8888
    },
    prefix: { //css3前缀版本需求
        browsers: ['> 5%', 'iOS 8']
    }
};

module.exports = {
    devtool: 'eval-source-map',

    entry: OPTS.entry,
    output: {
        path: path.resolve(OPTS.rootPath, OPTS.bundle.toFolder),
        filename: OPTS.bundle.filename,
        publicPath: OPTS.bundle.publicPath
    },

    module: {
        //开发环境不需要html-loader
        rules: [
            // { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
            { test: /\.less$/, loader: 'style-loader!css-loader!postcss-loader!less-loader' },
            { test: /\.(png|jpg|gif)$/i, loader: 'file-loader?name=' + OPTS.bundle.imageFilename }, //css部分背景图片的路径及文件名
            { test: /\.html$/, loader: 'html-loader' }
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor']
        }),
        new webpack.LoaderOptionsPlugin({ //webpack2写法上的差异
            options: {
                postcss: [autoprefixer(OPTS.prefix)]
            }
        })
    ],
    devServer: {
        host: OPTS.server.host,
        port: OPTS.server.port,
        historyApiFallback: true, //设置为true，所有的跳转将指向index.html
        noInfo: true
    },
    performance: {
        hints: false
    }
}
